<template>
  <div class="user-info pad">
    <el-page-header class="page-header" @back="goBack" :content="title"> </el-page-header>
    <div class="head">
      <span>用户详情</span>
    </div>
    <div class="item b-b">
      <span class="title">用户基本信息</span>
      <div class="base-info m-t-b">
        <table class="base-table">
          <tr>
            <td>注册用户编号:</td>
            <td>{{ baseInfo.openid }}</td>
          </tr>
          <tr>
            <td>昵称:</td>
            <td>{{ baseInfo.nickname }}</td>
          </tr>
          <tr>
            <td>创建时间:</td>
            <td>{{ baseInfo.createDate }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="item">
      <span class="title">家庭成员列表</span>
      <el-table class="m-t-b" :data="user.relatives" v-loading="loading1">
        <el-table-column label="关联关系名称" prop="relationship"> </el-table-column>
        <el-table-column label="关联关系昵称" prop="nickname"> </el-table-column>
        <el-table-column label="学校">
          <template slot-scope="scope">
            <!-- {{ scope.row.sno ? scope.row.sno : "暂无" }} -->
            {{ scope.row.enterpriseName ? scope.row.enterpriseName : "暂无" }}
          </template>
        </el-table-column>
        <el-table-column label="班级信息">
          <template slot-scope="scope">
            {{ scope.row.sno }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="260">
          <template slot-scope="scope">
            <el-button @click="fileInfo(scope.row)" type="text" size="small">
              查看健康档案
            </el-button>
            <el-button type="text" size="mini" @click="lookMentalRecord(scope.row)">
              查看心理测评记录
            </el-button>
            <!-- <el-button disabled @click="cardInfo(scope.row)" type="text" size="small">
              健康打卡查看
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="item">
      <span class="title">家庭关系列表(共享家庭成员)</span>
      <el-table stripe :data="families" v-loading="familyLoading" class="m-t-b">
        <el-table-column label="用户编号" prop="openid"></el-table-column>
        <el-table-column label="用户昵称" prop="nickname"></el-table-column>
        <el-table-column label="是否是主创人">
          <template slot-scope="scope">
            {{ scope.row.isitMaster ? "是" : "否" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="item">
      <span class="title">消费记录列表</span>
      <el-table class="m-t-b" :data="orders" v-loading="loading2">
        <el-table-column label="注册用户编号" prop="openid"> </el-table-column>
        <el-table-column label="交易流水号" prop="tradeNo  "> </el-table-column>
        <el-table-column label="产品名称" prop="body"> </el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            {{ scope.row.tradeMoney + "元" }}
          </template>
        </el-table-column>
        <el-table-column label="购买时间" prop="createDate"> </el-table-column>
        <el-table-column label="关联关系名称" prop="relationship"> </el-table-column>
      </el-table>
      <el-pagination
        class="m-t-b flex"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="handleConPageChange"
        :total="consumeTotal"
      >
      </el-pagination>
    </div>
    <el-dialog title="健康档案列表" :visible.sync="showDialog">
      <el-table stripe border :data="files" v-loading="loading">
        <el-table-column label="健康档案编号" prop="recordsId"></el-table-column>
        <el-table-column label="创建时间" prop="createDate"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="lookFileInfo(scope.row)" type="text" size="mini"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="m-t-b flex"
        :page-size="pageSize"
        layout="prev, pager, next"
        @current-change="handlePageChange"
        :total="total"
      >
      </el-pagination>
    </el-dialog>
    <el-dialog title="心理测评记录" :visible.sync="showMentalDialog">
      <el-table
        :data="mentalList"
        stripe
        border
        v-loading="mentalLoading"
        @expand-change="expandChange"
      >
        <el-table-column label="答题明细" type="expand" width="100">
          <template slot-scope="scope">
            <div class="info-wrap" v-loading="innerLoading">
              <div class="t-item">
                <div class="i-title">答题记录</div>
                <div>
                  <el-table :data="scope.row.questionList" border stripe>
                    <el-table-column label="题目名称" prop="title"></el-table-column>
                    <el-table-column label="所选答案">
                      <template slot-scope="scope1">
                        {{ scope1.row[scope1.row.value] }}
                      </template>
                    </el-table-column>
                    <el-table-column label="获得分数">
                      <template slot-scope="scope1">
                        {{ scope1.row[scope1.row.value + "s"] }}分
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="t-item">
                <div class="i-title">评测明细</div>
                <div>
                  <el-table :data="scope.row.ruleList" border stripe>
                    <el-table-column
                      label="评测类型"
                      prop="psychologicalrulesTitle"
                    ></el-table-column>
                    <el-table-column label="评测评语">
                      <template slot-scope="scope2">
                        <p v-for="(ii, index) in scope2.row.resultList" :key="index">
                          {{ ii }}。
                        </p>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="心理测试表表名" prop="title"></el-table-column>
        <el-table-column label="测评结果">
          <template slot-scope="scope">
            {{ scope.row.isGood ? "正常" : "异常" }}
          </template>
        </el-table-column>
        <el-table-column label="测评时间" prop="createDate"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import goBack from "../components/goBack";
import { formatDate } from "../util";
import {
  getRelativeList,
  getConsumeList,
  getFileHistoryList,
  getFamilyList,
  getMentalRecordByMId,
  getQuestionRecord,
  ee,
} from "../api";

export default {
  name: "userInfo",
  props: ["id"],
  data() {
    return {
      showDialog: false,
      loading: false,
      loading1: true,
      loading2: true,
      showMentalDialog: false,
      mentalLoading: true,
      innerLoading: true,
      mentalList: [],
      files: [],
      orders: [],
      title: "",
      baseInfo: "",
      pageSize: 10,
      memberId: 0,
      total: 0,
      consumeTotal: 0,
      families: [],
      familyLoading: true,
      preMemberId: "",
      user: {
        name: "Jack",
        id: "Y001",
        date: "2020-1-1",
        relatives: [],
      },
    };
  },
  methods: {
    fileInfo(data) {
      // console.log(data);
      this.showDialog = true;
      this.loading = true;
      this.memberId = data.memberId;
      this.relationship = data.relationship;
      this.fetchFileHistory(1, data.memberId);
    },
    expandChange(row, expand) {
      // 展开或收起行触发
      if (!expand.length) return;
      if (row.questionList.length) return;
      this.fetchQuestionRecord(row.orderNum, row);
    },

    lookMentalRecord({ memberId }) {
      // 查询心理测评记录
      // console.log(memberId);
      this.showMentalDialog = true;
      if (this.preMemberId === memberId && this.mentalList.length) return;
      this.mentalList = [];
      this.preMemberId = memberId;
      this.mentalLoading = true;

      getMentalRecordByMId(memberId)
        .then((res) => {
          if (res.data.code === 1) {
            let list = res.data.data || [];
            let tempObj = {};
            let recordList = [];
            console.log(list);
            list.forEach((item) => {
              if (!tempObj[item.createDate]) {
                tempObj[item.createDate] = [item];
              } else {
                tempObj[item.createDate].push(item);
              }
            });
            console.log(tempObj);
            for (let key in tempObj) {
              let time = formatDate(key, "zh:");
              let title = tempObj[key][0].psychologyTitle;
              let orderNum = tempObj[key][0].orderNum;
              let badList = tempObj[key].filter((item) => item.type == "2");
              recordList.push({
                title,
                createDate: time,
                orderNum,
                isGood: badList.length ? false : true,
                questionList: [],
                ruleList: [],
              });
            }
            this.mentalList = recordList;
          } else {
            this.$message.error(res.data.msg || "服务异常!");
          }
          this.mentalLoading = false;
        })
        .catch((e) => {
          this.mentalLoading = false;
          this.$message.error("服务异常!");
        });
    },
    fetchQuestionRecord(order, row) {
      // 查询答题记录
      this.innerLoading = true;
      getQuestionRecord(order)
        .then((res) => {
          if (res.data.code === 1) {
            let { particulars, subject } = res.data.data;
            particulars.forEach((s) => {
              s.resultList = s.result.split("。").filter((s1) => s1);
            });
            row.questionList = subject;
            row.ruleList = particulars;
          } else {
            this.$message.error(res.data.msg || "服务异常!");
          }
          this.innerLoading = false;
        })
        .catch((e) => {
          console.log(e);
          this.innerLoading = false;
          this.$message.error("服务异常!");
        });
    },
    goBack() {
      history.back();
    },
    cardInfo(data) {
      console.log(data);
    },
    handlePageChange(page) {
      this.fetchFileHistory(page, this.memberId);
    },
    handleConPageChange(page) {
      this.fetchConsumeList(page);
    },
    fetchFmilyList(openid) {
      // 获取家庭关系列表
      this.familyLoading = true;
      getFamilyList(openid)
        .then((res) => {
          this.familyLoading = false;
          if (res.data.code === 1) {
            let list = res.data.data || [];
            this.families = list;
          } else {
            this.$message.error(res.data.msg || "网络异常!");
          }
        })
        .catch((e) => {
          this.familyLoading = false;
          this.$message.error("网络异常!");
        });
    },

    fetchConsumeList(index) {
      this.loading2 = true;
      getConsumeList({
        index: index,
        count: this.pageSize,
        queryParam: {
          userId: this.baseInfo.id,
        },
      })
        .then((res) => {
          if (res.data.code === 1) {
            let list = res.data.data.list || [];
            this.consumeTotal = res.data.data.totalRecord;
            for (let i = 0; i < list.length; i++) {
              list[i].createDate = formatDate(list[i].createDate);
              list[i].relationship = list[i].relationship ? list[i].relationship : "无";
            }
            this.orders = list;
          } else {
            this.$message.error("网络异常!");
          }
          this.loading2 = false;
        })
        .catch((e) => {
          this.loading2 = false;
          this.$message.error("网络异常!");
        });
    },
    fetchFileHistory(index, id) {
      // 获取成员的档案历史
      getFileHistoryList({
        index: index,
        count: this.pageSize,
        queryParam: {
          memberId: id, //成员id 必填
        },
      })
        .then((res) => {
          if (res.data.code === 1) {
            this.loading = false;
            let list = res.data.data.list || [];
            this.total = res.data.data.totalRecord;
            for (let i = 0; i < list.length; i++) {
              list[i].createDate = formatDate(list[i].createDate);
            }
            this.files = list;
          } else {
            this.loading = false;
            this.$message.error(res.data.msg || "网络异常!");
          }
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error("网络异常!");
        });
    },
    fetchRelative(id) {
      // 获取用户的关系列表
      this.loading1 = true;
      getRelativeList(id)
        .then((res) => {
          console.log(res);
          if (res.data.code === 1) {
            this.user.relatives = res.data.data;
          } else {
            this.$message.error(res.data.msg || "网络异常!");
          }
          this.loading1 = false;
        })
        .catch((e) => {
          this.loading1 = false;
          this.$message.error("网络异常!");
        });
    },

    lookFileInfo(data) {
      this.$router.push("/user/relative/" + data.recordsId + "/" + this.relationship);
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.name !== "SaleDetail") {
      sessionStorage.removeItem("saleDetailPage");
    }
    next();
  },
  filters: {
    snoFilter(sno) {
      let grades = [
        "幼儿园",
        "小学一年级",
        "小学二年级",
        "小学三年级",
        "小学四年级",
        "小学五年级",
        "小学六年级",
        "初中一年级",
        "初中二年级",
        "初中三年级",
        "高中一年级",
        "高中二年级",
        "高中三年级",
      ];
      let name = "";
      if (sno && sno.indexOf("-") !== -1) {
        let arr = sno.split("-");
        if (!isNaN(arr[0])) {
          name = `${grades[Number(arr[0])] ? grades[Number(arr[0])] : "其它"} - ${
            arr[1]
          }班 - ${arr[2]}号`;
        }
      } else {
        name = "暂无";
      }
      return name;
    },
  },
  created() {
    let infoStr = sessionStorage.getItem("info");
    this.baseInfo = JSON.parse(infoStr);

    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.fetchRelative(this.baseInfo.id);
    this.fetchConsumeList(1);
    this.fetchFmilyList(this.baseInfo.id);
  },
};
</script>
<style lang="scss">
.user-info {
  .info-wrap {
    max-height: 500px;
    overflow-y: auto;
    p {
      text-align: left !important;
      margin-top: 10px;
    }
    .i-title {
      padding: 15px 0 5px 0;
      color: #242424;
      font-weight: bold;
      font-size: 18px;
    }
  }
  .title {
    display: inline-block;
    padding: 8px 20px;
    background-color: $main-color;
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
  }
  .cell {
    text-align: center;
  }
  .item {
    padding: 20px 0;
    margin-top: 20px;
  }
  .base-table {
    width: 100%;
    tr {
      width: 100%;
      display: flex;
      td {
        font-size: 16px;
        color: #242424;
        padding: 8px 0;
        flex: 1;
        &:nth-of-type(1) {
          text-align: right;
        }
        &:nth-of-type(2) {
          padding-left: 10px;
          text-align: left;
        }
      }
    }
  }
}
</style>
